<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="/resources/css/nav.css">
	<style type="text/css">
	body{
		background-color: #f5f5f5;
	}
	.empty-goods{
	   margin: 0px auto;
       width: 1200px;
       background-color: #ffffff;
       font-size: 25px;
       height: 500px;
       padding:5px;
       margin-top: 50px;
       
	}
	.empty-img{
		width: 318px;
		height: 210px;
		float: left;
		margin-top: 130px;
		margin-left: 60px;
	}
	.empty-goods h2{
		color: #b0b0b0;
        font-weight: bold;
        font-size: 35px;
        text-align: center;
        margin-top: 215px;
	}
	#shopCart{
       margin: 0px auto;
       width: 1200px;
       margin-top: 10px;
	}
	.cart,.goods,.docart{
		background-color: #ffffff;
		overflow: hidden;
		padding: 20px;
	}
	.cart,.docart{
		margin-top: 10px;
	}
	.mycart{
		font-size: 18px;
		color: #f33;
		float: left;
	}
	.goods{
		margin-top: 2px;
	}
	.clean{
		float: right;
	}
	.clean a{
		font-size: 16px;
		color: #333;
	}
	.clean a:hover{
		color: #f33;
	}
	.goods-img-box,.goods-img,.goods-name,.googs-price,.count,.sum1,.deleteOne{
		float: left;
		color: #333;
		font-size: 16px;
		text-align: center;
	}
	.goods-img-box{
		width: 210px;
		height: 20px;
	}
	.goods-img{
		width: 210px;
	}
	.goods-name{
		width: 300px;
		margin-left: 30px;
	}
	.googs-price{
		width: 180px;
		margin-left: 30px;
	}
	.count{
		width: 100px;
		margin-left: 30px;
	}
	.remove,.addOne{
		margin-top: 53px;
		border: 1px solid #b0b0b0;
		display: block;
		width: 20px;
		height: 20px;
	}
	.count a:hover{
		border: 1px solid #f33;
		color: #f33;
	}
	.remove{
		float: left;
	}
	.addOne{
		float: right;
	}
	.sum1{
		width: 150px;
		margin-left: 30px;
	}
	.deleteOne{
		width: 50px;
		margin-left: 30px;

	}
	.deleteOne a{
		font-size: 18px;
		display: block;
		cursor: pointer;
		margin-top: 55px;

	}
	.deleteOne a:hover{
		margin-left: 12px;
		width: 25px;
		height: 25px;
		border-radius: 25px;
		background-color: #F94848;
		color: #fff;
	}
	.pro-height,.pro-height h1{
		height:130px;
  	line-height:130px;
  	overflow:hidden;
	}
	.sum2{
		float: right;
		margin-right: 50px;
		font-size: 20px;
	}
	.submitAdd{
		background-color: #e65514;
		width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #ffffff;
		font-size: 18px;
		float: right;
	}
	.sSum2{
		width: 100px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		margin-right: 5px;
	}
	</style>
</head>
<body>
	<div class="site-topbar">
	    <div class="top-bar">
	        <a href="/" class="welcom">返回首页</a>
	        <div class="login">
	            <c:if test="${empty username}">
        	<h2><a href="/login">登陆</a><span class="sep">|</span><a href="/registe">注册</a></h2>
        </c:if>
        <c:if test="${!empty username}">
       		<h2><a href="">${username}</a><span class="sep">|</span><a href="/loginout">注销</a></h2>
        </c:if>
	        </div>
	    </div>
	</div>
	<!-- 主内容 -->
	<c:if test="${empty carts}">
		<div class="empty-goods">
			<div class="empty-img"><img src="/resources/images/empty-cart.jpg" alt="empty-img" width="318" height="210"></div>
			<h2>您的购物车还是空的，赶紧行动吧!</h2>
		</div>
	</c:if>
	<c:if test="${!empty carts}">
	<div id="shopCart">
		<div class="cart">
			<div class="mycart">我的购物车</div>
			<div class="clean"><a href="/buy/clearAll">清空</a></div>
		</div>
		<div class="goods">
			<div class="goods-img-box"></div>
			<div class="goods-name">商品名称</div>
			<div class="googs-price">单价</div>
			<div class="count">数量</div>
			<div class="sum1">小计</div>
			<div class="deleteOne">操作</div>
		</div>
		
		
			<c:forEach var="cart" items="${carts}">
				<div class="goods">
					<div class="goods-img"><img src="/resources/images/${cart.goodImg}" alt="" width="210" height="130"></div>
					<div class="goods-name pro-height">${cart.goodName}</div>
					<div class="googs-price pro-height">${cart.price}元</div>
					<div class="count pro-height"><a href="/buy/remove?goodId=${cart.goodId}" class="remove">-</a> ${cart.count} <a href="/buy/add?goodId=${cart.goodId}" class="addOne">+</a></div>
					<div class="sum1 pro-height">${cart.sum}元</div>
					<div class="deleteOne pro-height"><a href="/buy/clear?goodId=${cart.goodId}">×</a></div>
				</div>
			</c:forEach> 
		


		<div class="docart">
			<a href="/buy/buySuccess"><h3 class="submitAdd">去结算</h3></a>
			<div class="sum2"><span class="sSum2">合计:</span>${allSum}元</div>
		</div>
	</div>
	</c:if>
</body>
</html>